<!--
 * @LastEditors: yuanweijiang
 * @LastEditTime: 2025-11-13 14:59:12
 * @Description: 用户名登录
-->
<template>
	<el-form class="account" :rules="loginRules" :model="state.ruleForm" ref="loginFormRef" @keyup.enter="onSignIn">
		<!-- 账号 -->
		<div class="account-code">
			<el-input placeholder="请输入用户名" show-word-limit v-model="state.ruleForm.username">
				<template #prefix>
					<div>
						<img src="/@/assets/login/登录名.png" />
					</div>
				</template>
			</el-input>
		</div>
		<!-- 密码 -->
		<div class="account-code">
			<el-input
				placeholder="请输入密码"
				class="account-code-input"
				style="border: 1px"
				:type="eyeFlag ? 'password' : 'text'"
				show-word-limit
				v-model="state.ruleForm.password"
			>
				<template #prefix>
					<div>
						<img src="/@/assets/login/密码.png" />
					</div>
				</template>
				<template #suffix>
					<img src="/@/assets/login/眼睛.png" style="width: 25px; cursor: pointer" @click="toggleEyeFlag" />
				</template>
			</el-input>
		</div>
		<div class="account-button" ref="loginDom" @click="onSignIn">登录</div>
		<span class="account-text">首次登录需要通过手机验证后注册用户名</span>
	</el-form>
</template>

<script setup lang="ts">
import { ref, defineEmits, reactive } from 'vue';
import { useUserInfo } from '/@/stores/userInfo';
import { useI18n } from 'vue-i18n';
import { SM4Util } from '/@/utils/sm4.js';
// 使用store替代mapMutations
const { t } = useI18n();
const emit = defineEmits(['signInSuccess']); // 声明事件名称
const loginFormRef = ref(); // 定义LoginForm表单引用
const loginRules = reactive({
	username: [{ required: true, trigger: 'blur', message: t('password.accountPlaceholder1') }], // 用户名校验规则
	password: [{ required: true, trigger: 'blur', message: t('password.accountPlaceholder2') }], // 密码校验规则
});
// 响应式数据
const eyeFlag = ref(true);
const loginDom = ref<HTMLElement | null>(null);
const loading = ref(false); // 定义是否正在登录中
const state = reactive({
	isShowPassword: false, // 是否显示密码
	ruleForm: {
		// 表单数据
		username: '', // 用户名
		password: '', // 密码
		code: '', // 验证码
		randomStr: '', // 验证码随机数
	},
});
// 方法定义
const toggleEyeFlag = () => {
	eyeFlag.value = !eyeFlag.value;
};

const onSignIn = async () => {
	const valid = await loginFormRef.value.validate().catch(() => {}); // 表单校验
	if (!valid) return false;
	try {
		let SM4 = new SM4Util();
		let queryForm = JSON.parse(JSON.stringify(state.ruleForm));
		queryForm.password = SM4.encryptCustom_CBC(state.ruleForm.password, 'ZS@XWIRtu2e0#25!', '#ZS@PSXW2025!Key');
		await useUserInfo().login(queryForm); // 调用登录方法
		emit('signInSuccess'); // 触发事件
	} finally {
		loading.value = false; // 登录结束
	}
};
</script>

<style lang="scss" scoped>
.account {
	.account-button {
		width: 335px;
		height: 36px;
		background: #3156a5;
		border-radius: 4px 4px 4px 4px;
		text-align: center;
		line-height: 36px;
		margin-top: 44px;

		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: 500;
		font-size: 18px;
		color: #ffffff;

		&:hover {
			background: #5276c3;
			cursor: pointer;
		}
	}

	.account-code {
		margin-top: 15px;
		:deep(.el-input-group__prepend) {
			background-color: #fff;
			padding: 0 15px;
			border: 0px;
		}
		border-radius: 4px 4px 4px 4px;
		border: 1.5px solid #3156a5;
		:deep(.el-input) {
			.el-input__suffix {
				display: flex;
				align-items: center;
			}
			input {
				width: 80%;
				// border-left-width: 0px;
				// border: 1px 1px 1px 0px solid rgb(4, 4, 239);
				border: 0px;
				letter-spacing: 0.1em;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 500;
				font-size: 16px;
				color: #a7adbc;
				line-height: 19px;
				padding: 0 0px;
				color: #000;
			}
			::-webkit-inner-spin-button {
				-webkit-appearance: none;
				margin: 0;
			}
		}
	}

	.account-text {
		float: right;
		margin-top: 31px;
		height: 16px;
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: 500;
		font-size: 14px;
		color: #a7adbc;
		line-height: 16px;
		text-align: right;
		font-style: normal;
		text-decoration-line: underline;
		text-transform: none;
	}
}
</style>
